<script setup lang="ts">
import { throttle } from "simple-mind-map/src/utils/index"
import { onMounted, onUnmounted, ref } from "vue"
import "./assets/icon-font/iconfont.css"
import Desc from "./components/Desc/index.vue"
import Toolbar from "./components/Toolbar/index.vue"
import MindMapUtil from "./utils/mind-map"
import { APIXmindSet } from "./api"
import Speech from "@/utils/speech"
import { ElMessage, ElNotification } from "element-plus"
import Loading from "./utils/loading"
const mindContainer = ref()

const show = ref(window.innerWidth > 678)
const onResize = throttle((e: any) => {
  MindMapUtil.instance.mindMap?.resize()
  if (show.value && e.target.innerWidth <= 678) {
    show.value = false
  } else if (e.target.innerWidth > 678 && !show.value) {
    show.value = true
  }
}, 300)
onMounted(() => {
  MindMapUtil.instance.init(mindContainer.value)
  MindMapUtil.instance.mindMap?.on("draw_click", () => {
    if (!MindMapUtil.instance.currentId) {
      ElNotification({
        title: "提示",
        message: "请先开始头脑风暴",
        type: "warning",
        duration: 3000
      })
    }
  })
  MindMapUtil.instance.$on("node_active", (value: any) => {
    const [, node] = value
    if (node.length) {
      if (MindMapUtil.instance.currentId) {
        const data = MindMapUtil.instance.mindMap?.getData(false)
        if (data) {
          APIXmindSet({
            xmind_id: MindMapUtil.instance.currentId,
            content: JSON.stringify(data)
          })
        }
      }
    }
  })
  Speech.instance.on("chat_text_end", (msg: any) => {
    if (msg.messages) {
      try {
        const json = JSON.parse(msg.messages)
        if (json) {
          MindMapUtil.instance.updateData(json)
          MindMapUtil.instance.creating = false
          Loading.close()
        }
      } catch (error) {
        Loading.close()
        ElMessage({
          type: "success",
          message: "生成失败"
        })
      }
    }
  })
  window.addEventListener("resize", onResize)
})
onUnmounted(() => {
  Speech.instance.off("chat_text_end")
  window.removeEventListener("resize", onResize)
})
</script>

<template>
  <div ref="mindContainer" id="mindMapContainer" />
  <el-container class="tool-container">
    <el-aside :width="show ? '300px' : '0'">
      <Desc :hide="!show" />
      <div class="toggleShowBtn" :class="{ hide: !show }" @click="show = !show">
        <span class="iconfont-chaojizhiku iconjiantouyou" />
      </div>
    </el-aside>
    <el-main class="main">
      <div class="bar"><Toolbar /></div>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.toggleShowBtn {
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
  right: -10px;
  width: 35px;
  height: 60px;
  background: #409eff;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.1s linear;
  z-index: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  align-items: center;
  padding-right: 4px;

  &.hide {
    right: -16.5px;
    span {
      transform: rotateZ(0);
    }
  }

  &:hover {
    right: -35px;
  }

  span {
    color: #fff;
    transition: all 0.1s;
    transform: rotateZ(180deg);
  }
}
#mindMapContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.tool-container {
  height: 100%;
  width: 100%;
  position: relative;
  pointer-events: none;
  .el-aside {
    background-color: #fff;
    overflow: visible;
    position: relative;
    transition: all 0.3s;
    pointer-events: auto;
  }
  .main {
    padding: 0;
    pointer-events: none;
    overflow: hidden;
    .bar {
      position: relative;
      pointer-events: auto;
    }
  }
}
</style>
